<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            1、对对象新增加的属性是不具有劫持功能的 
                ==解决方法== vue2 提供一个实例方法 $set ,通过 vm.$set 可以手动增加劫持
        -->
        <p>{{ user }}</p>
        <p>{{ user.sex }}</p>
        <input type="button" value="changeUserName" @click="changeUserName()">
        <input type="button" value="addUserAge" @click="addUserAge()">
        <input type="button" value="addUserSex" @click="addUserSex()">
        <hr>
        <!-- 
            2、vue2中对数组的下标操作和对数组的长度操作，不会触发响应式的 
                ==解决方案== vue2 中不建议对数组的下标和长度进行操作，
                            建议使用vue2修改后的数组原型方法进行操作（数组变更方法）
        -->
        <p>{{ arr }}</p>
        <input type="button" value="changeArr" @click="changeArr(0)">
        <input type="button" value="setArrLength" @click="setArrLength(2)">
        <input type="button" value="addArrItem" @click="addArrItem(22222)">

    </div>
    <script type="module"> 
        import Vue from "../assets/vue2/vue.esm.browser.js";
        new Vue({
            el:"#app",
            data(){
                return {
                    user:{
                        name:"aaa"
                    },
                    arr:[1,2,3,4,5,6]
                }
            },
            methods:{
                changeUserName(){
                    this.user.name = 111;
                },
                addUserAge(){
                    this.user.age = 23;
                    console.log(this)
                },
                addUserSex(){
                    // this.user.sex = "男";
                    // this.$set(target,attrName,value)
                    this.$set(this.user,"sex","男")
                    console.log(this)
                },
                changeArr(i){
                    this.arr[i] = 11111;
                    console.log(this)
                },
                setArrLength(len){
                    this.arr.length = len;
                },
                addArrItem(nv){
                    this.arr.push(nv)
                }
            }
        })
    </script>
</body>
</html>